<template>
	<footer>
		<ul>
			<li v-for="item in vroutes">
				<router-link exact :to="item.path">
					<i v-bind:class="item.icon"></i>
					<p>{{item.name}}</p>	
				</router-link>
			</li>
		</ul>
	</footer>	
</template>

<script type="text/javascript">
import vroutes from "../routes.js"
export default {
	data() {
		return {
			vroutes
		}
	}
}

</script>

<style scoped>
footer {
	position: fixed; 
	bottom: 0;
	left: 0;
	z-index: 999;
	height: 5rem;
  	width: 100%;
	background-color: #fff;
}
footer ul{
	display: flex;
    justify-content: space-around;
	
}
footer li{
	display: inline-block;
	flex-grow: 1; 
  	height: 100%;
	padding-top: .6rem;
	text-align: center;
	border-right: 1px solid #f3f3f3;
}
footer a{
	text-decoration: none;
	color: #000;
	font-size: 1.2rem;
}
  .router-link-active {
  color: #1296db !important;
}  

</style>